<script setup lang="ts">
import { ref } from 'vue'

const userName1 = ref('')
const userName2 = ref('admin')
const changeUserName = (e: Event) => {
  console.log((e.target as HTMLInputElement).value)
  userName2.value = (e.target as HTMLInputElement).value
}

const gender = ref('男')
const changeGender = (e: Event) => {
  // console.log((e.target as HTMLInputElement).value);
  gender.value = (e.target as HTMLInputElement).value
}

const hobbies = ref(['音乐'])

const selectedCity = ref('上海')
</script>

<template>
  <div>
    <!-- 输入框相关 -->
    <!-- :value + @input组合 -->
    <input v-model="userName1" type="text" placeholder="请输入用户名1" />
    <br />
    <input :value="userName2" @input="changeUserName" type="text" placeholder="请输入用户名2" />
    <br />
    <br />
    <!-- 单选相关 -->
    <!-- :checked + @change组合  -->
    <div>
      <span>请选择性别: </span>
      <!-- 
      <input v-model="gender" type="radio" name="gender" value="男" />男
      <input v-model="gender" type="radio" name="gender" value="女" />女 
      -->

      <input
        type="radio"
        name="gender"
        value="男"
        :checked="gender === '男'"
        @change="changeGender"
      />男
      <input
        type="radio"
        name="gender"
        value="女"
        :checked="gender === '女'"
        @change="changeGender"
      />女
      <div>选择的性别是: {{ gender }}</div>
    </div>

    <br />
    <br />
    <!-- 多选相关 -->
    <div>
      <span>请选择爱好: </span>
      <input type="checkbox" value="阅读" v-model="hobbies" />阅读
      <input type="checkbox" value="音乐" v-model="hobbies" />音乐
      <input type="checkbox" value="运动" v-model="hobbies" />运动
      <p>选择的爱好：{{ hobbies }}</p>
    </div>

    <br />
    <br />
    <!-- 下拉框选择 -->
    <div>
      <span>你喜欢的城市: </span>
      <select v-model="selectedCity">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
      </select>
      <p>选择的城市：{{ selectedCity }}</p>
    </div>
  </div>
</template>

<style scoped></style>
